/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-06-14 10:21:56
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2023-01-05 16:10:04
 * @FilePath: \adminstration\src\Common\Scss\_admin.scss
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

.FormClass {
	padding: 8px 0;
	max-height: 80vh;
	overflow-y: scroll;

	&::-webkit-scrollbar {
		display: none;
	}

	.ant-spin-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.ant-form-item-explain-success,
	.Help {
		font-size: 20px;
		color: #262626;
		margin-top: 8px;
	}

	.FormHidden {
		display: none;
	}

	.FormItem {
		width: 50%;
	}

	.FormAll {
		width: 100%;
	}

	.FormBtn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ant-form-item-label {
		width: 150px;
	}

	.SelectIcon {
		height: 100px;
		overflow-y: scroll;
		border: 1px solid #d9d9d9;
		padding: 4px 11px;
		border-radius: 2px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		cursor: pointer;

		&::-webkit-scrollbar {
			display: flex;
		}

		&:hover {
			transition: border 0.5s;
			border: 1px solid #1890ff;
		}

		& > div {
			width: 35px;
			height: 35px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			border-radius: 4px;

			&:hover {
				background: rgba(0, 0, 0, 0.65);
				transition: all 0.35s;
				color: white;
			}

			&.active {
				background: #1890ff;
				transition: all 0.35s;
				color: white;

				path {
					fill: white;
				}
			}
		}
	}

	.RemarkForm {
		width: 100%;

		.ICONSelect {
			width: 100%;
			height: 100px;
			overflow-y: scroll;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-wrap: wrap;
			border-radius: 15px;
			padding: 15px 23px;
			border: 1px solid #d9d9d9;

			& > div {
				width: 40px;
				height: 40px;
				font-size: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 3px;
				overflow: hidden;

				& > span {
					color: #262626;
				}

				&:hover {
					background: #446efe;

					& > span {
						color: white;

						* {
							fill: white;
						}
					}
				}
			}

			& > .Active {
				background: #262626;

				& > span {
					color: white;

					* {
						fill: white;
					}
				}
			}
		}

		.UpLoadStyle {
			display: inline-block;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100px;

			& > .ant-upload.ant-upload-select {
				width: 100px;
				height: 100px;
				// border: 1px dashed #D9D9D9;
				background: #f9f9f9;
				box-sizing: border-box;

				.uploadButton {
					width: 100px;
					height: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}
			}

			& > .ant-upload-list {
				flex: 1;
				margin-right: 15px;

				.ant-upload-list-item {
					height: 100px;
					margin: 0;

					.anticon {
						font-size: 18px;
					}

					.ant-upload-list-item-name {
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
				}
			}
		}
	}
}
